//响应式 管理事件处理机制
export default class Handle {
  constructor(courseData, cartData, oAddBtns, observer) {
    this.courseData = courseData;
    this.cartData = cartData;
    //找出所有课程列表里的按钮
    this.oAddBtns = oAddBtns;
    this.observer = observer;

    this.init();

  }

  init() {
    //增加观察者任务
    this.observer.add(this.setState.bind(this));
    this.observer.add(this.setAddBtnState.bind(this));
  }

  //点击加入购物车按钮时修改state属性，且将加入的数据添加到cartData里
  //处理state属性
  setState(id, target, state) {
    this.courseData = this.courseData.filter(item => {
      if (item.id === id) {
        item.state = state;

        //如果state: 1 已添加的商品应该在cartData数据里
        if (state) {
          this.cartData.push(item);
        } else {
          //如果state: 0 cartData数据里的那一项商品应该删除掉
          this.cartData = this.cartData.filter(elem => {
            if (elem.id === id) {
              return false;
            }
            return true;
          })
        }
      }

      return true;
    });
  }

  //点击按钮修改按钮文本内容且显示或变灰色
  setAddBtnState(id, target, state) {
    //如果courseData 里 state: 1 
    if (state) {
      target.innerText = '已添加';
      target.disabled = true;
    } else {
      //如果courseData 里 state: 0 
      //找到当前项下标的数据
      const thisAddBtn = this.oAddBtns[this.courseData.findIndex(item => item.id === id)];
      thisAddBtn.innerText = '加入购物车';
      thisAddBtn.disabled = false;
    }
  }

}